import './index.css';
let mask = document.querySelector('.mask');
// 大盒子
let bigBox = document.querySelector('.bigBox');
// 小盒子
let smallBox = document.querySelector('.smallBox');
// 图片选项栏
let selectImg = document.querySelector('.selectImg');
// 事件委托改变图片
selectImg.addEventListener('mouseover', function (e) {
    if (e.target.tagName === 'IMG') {
        document.querySelector('.active').classList.remove('active');
        e.target.classList.add('active');
        // 获取小盒子里面的img,并更改图片
        smallBox.querySelector('img').src = e.target.src;
        // 获取大盒子里面的img并更改图片
        bigBox.querySelector('img').src = e.target.src;
    }
});
// 鼠标在小盒子中移动事件
smallBox.addEventListener('mousemove', function (e) {
    // 鼠标在盒子中的坐标
    let x = e.pageX - smallBox.getBoundingClientRect().left;
    // y方向要减去页面滚动距离
    let y =
        e.pageY -
        smallBox.getBoundingClientRect().top -
        document.documentElement.scrollTop;
    // console.log(x,y);
    // mask在盒子内移动
    // console.log(smallBox.offsetHeight,smallBox.offsetWidth);
    if (
        x >= 0 &&
        x <= smallBox.offsetWidth &&
        y >= 0 &&
        y <= smallBox.offsetHeight
    ) {
        // 记录黑色盒子移动的位置
        let mx = 0,
            my = 0;
        let halfMaskX = mask.offsetWidth / 2;
        let halfMaskY = mask.offsetHeight / 2;
        if (x < halfMaskX) mx = 0;
        if (x >= halfMaskX && x <= smallBox.offsetWidth - halfMaskX)
            mx = x - halfMaskX;
        if (x > smallBox.offsetWidth - halfMaskX)
            mx = smallBox.offsetWidth - halfMaskX - halfMaskX;
        if (x < halfMaskY) my = 0;
        if (y >= halfMaskY && y <= smallBox.offsetHeight - halfMaskY)
            my = y - halfMaskY;
        if (y > smallBox.offsetHeight - halfMaskY)
            my = smallBox.offsetHeight - halfMaskY - halfMaskY;
        mask.style.left = mx + 'px';
        mask.style.top = my + 'px';
        // 移动大图片，3倍
        let bigImg = bigBox.querySelector('img');
        bigImg.style.transform = `translate(-${3 * mx}px,-${3 * my}px)`;
    }
});

// 事件委托改变图片
selectImg.addEventListener('mouseover', function (e) {
    if (e.target.tagName === 'IMG') {
        document.querySelector('.active').classList.remove('active');
        e.target.classList.add('active');
        // 获取小盒子里面的img,并更改图片
        smallBox.querySelector('img').src = e.target.src;
        // 获取大盒子里面的img并更改图片
        bigBox.querySelector('img').src = e.target.src;
    }
});
// 鼠标在小盒子中移动事件
smallBox.addEventListener('mousemove', function (e) {
    // 鼠标在盒子中的坐标
    let x = e.pageX - smallBox.getBoundingClientRect().left;
    // y方向要减去页面滚动距离
    let y =
        e.pageY -
        smallBox.getBoundingClientRect().top -
        document.documentElement.scrollTop;
    // console.log(x,y);
    // mask在盒子内移动
    // console.log(smallBox.offsetHeight,smallBox.offsetWidth);
    if (
        x >= 0 &&
        x <= smallBox.offsetWidth &&
        y >= 0 &&
        y <= smallBox.offsetHeight
    ) {
        // 记录黑色盒子移动的位置
        let mx = 0,
            my = 0;
        let halfMaskX = mask.offsetWidth / 2;
        let halfMaskY = mask.offsetHeight / 2;
        if (x < halfMaskX) mx = 0;
        if (x >= halfMaskX && x <= smallBox.offsetWidth - halfMaskX)
            mx = x - halfMaskX;
        if (x > smallBox.offsetWidth - halfMaskX)
            mx = smallBox.offsetWidth - halfMaskX - halfMaskX;
        if (x < halfMaskY) my = 0;
        if (y >= halfMaskY && y <= smallBox.offsetHeight - halfMaskY)
            my = y - halfMaskY;
        if (y > smallBox.offsetHeight - halfMaskY)
            my = smallBox.offsetHeight - halfMaskY - halfMaskY;
        mask.style.left = mx + 'px';
        mask.style.top = my + 'px';
        // 移动大图片，3倍
        let bigImg = bigBox.querySelector('img');
        bigImg.style.transform = `translate(-${3 * mx}px,-${3 * my}px)`;
    }
});
